<template>
    <rx-dialog @handOk="onOk" @cancel="onCancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form"  :model="mdl" :rules = "rules">
                    <a-form-model-item  :label="i18n('entryType','入口类型')" prop = "type">
                        <a-radio-group v-model="mdl.type" @change="valueChange">
                            <a-radio  value="menu"> {{i18n('menu','菜单')}}</a-radio>
                            <a-radio value="link">{{i18n('link','链接')}}</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item  :label="i18n('menuName','菜单名称')" prop = "name" v-if="mdl.type!='menu'">
                        <a-input v-model="mdl.name"></a-input>
                    </a-form-model-item>
                    <a-form-model-item  :label="i18n('MenuEntry','菜单入口')" prop = "key" >
                        <rx-input-button v-if="mdl.type=='menu'"  @click="openMenuDialog" v-model="menuValue"></rx-input-button>
                        <a-input v-else v-model="mdl.key"></a-input>
                    </a-form-model-item>
                    <rx-icon @certainIcon="certainIcon" :system="mdl.background.type" :bgColor="mdl.background.color" :icon="mdl.background.icon" :iconType="'custom'"></rx-icon>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
/**
 * 选择快捷入口菜单的对话框
 */
import { Util,RxDialog,RxLayout,RxInputButton} from "@lowcode/jpaas-common-lib";
import MenuDialog from "./MenuDialog.vue"
import RxIcon from "@/components/rxComponent/rx-icon";

export default {
    name: "QuickEntranceDialog",
    components: {
        RxDialog,
        RxLayout,
        RxInputButton,
        RxIcon
    },
    props:["layerid","destroy","config","menus","config"],
    data() {
        return {
            mdl:{
                type:"menu",
                name:"",
                key:"",
                background:{
                    type:"lineage",
                    color:"linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)",
                    icon:"{\"type\":\"jpaasIcon\",\"icon\":\"iconpiliang\"}",
                }
            },
            rules: {
                key: [{ required:true,message: this.i18n('selectEntry',"请选择入口"), trigger: 'change' }],
            },
            menuValue:"",
        }
    },
    created() {
        this.init()
    },
    methods: {
        init(){
            let appId = Util.getUrlParam("appId");
            if(!appId){
                this.mdl.type = 'link'
            }
            if(this.config){
                this.mdl = JSON.parse(JSON.stringify(this.config))
                this.menuValue = JSON.stringify({text:this.config.name,value:this.config.key});
            }
            if(!this.mdl.id){
              this.mdl.id=Util.randomId();
            }
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "quickEntranceLang", key);
        },
        valueChange(e){
            this.mdl.name="";
            this.mdl.key="";
        },
        openMenuDialog(vm){
            let self=this;
            let conf = {
                component: MenuDialog,
                title: this.i18n("selectMenu","选择菜单"),
                widthHeight: ['810px', '600px'],
                curVm: this,
                zIndex:9999,
                data:{menus:this.menus}
            };
            Util.open(conf, function (action,data) {
                if (action != "ok") {return;}
                self.mdl.name=data.title;
                self.mdl.key=data.value;
                self.mdl.background.icon=data.icon;
                self.menuValue=JSON.stringify({text:data.title,value:data.value});
            });
        },
        certainIcon(icon,bgColor,system){
            this.mdl.background['color'] = bgColor;
            this.mdl.background['icon']=icon;
            this.mdl.background['type'] = system;
        },
        onOk(e){
            this.$refs.form.validate(valid=> {
                if (!valid) {
                    e.loading = false;
                    return;
                }
                Util.closeWindow(this,'ok',this.mdl);
            });
        },
        onCancel(){
            Util.closeWindow(this,'cancel');
        }
    },
    watch: {},
}
</script>

<style scoped>

</style>